<!DOCTYPE html>

<html>

    <head>
        <title>Uruk Hai - The Online UML Editor</title>
        <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
        <meta name="description" content="Free Online UML Class Diagram Editor">
        <meta name="author" content="True Foking Norwegian Black Csapat">
        <meta charset="utf-8">
        
        <script type="text/javascript" src="javascript/basic_util.js"></script>
        <script type="text/javascript" src="javascript/xml_util.js"></script>
        
        <script type="text/javascript" src="javascript/event_handling.js"></script>
        <script type="text/javascript" src="javascript/project.js"></script>
        <script type="text/javascript" src="javascript/model_util.js"></script>
        <script type="text/javascript" src="javascript/model.js"></script>

        <script type="text/javascript" src="javascript/diagram/diagram_util.js"></script>
        <script type="text/javascript" src="javascript/diagram/diagram_callbacks.js"></script>
        <script type="text/javascript" src="javascript/diagram/diagram_blockrenderer.js"></script>
        <script type="text/javascript" src="javascript/diagram/diagram_contentgeneration.js"></script>
        <script type="text/javascript" src="javascript/diagram/diagram.js"></script>

        <script type="text/javascript" src="javascript/editors.js"></script>        
        <script type="text/javascript" src="javascript/imported/dtree.js"></script>
        <script type="text/javascript" src="javascript/index.js"></script>
        
        <script type="text/javascript" src="javascript/initialize_app.js"></script>
            
        <link rel="stylesheet" href="css/app_ui.css" type="text/css">
        <link rel="styleSheet" href="css/dtree.css" type="text/css" />

    </head>

    <body onresize="resizeToFitWindow();">

        <div id="titlebar">
            <div id="menu">
                <span id="mainmenu">
                    Project
                    <input type ="button"
                           onclick="javascript: project.evNewProject();"
                           class="menuicon"
                           title="New Project"
                           style="background-image: url(media/icons/icon_new_project.png);"
                           />
                    <input type ="button"
                           onclick="javascript: addFilePicker();"
                           class="menuicon"
                           title="Open Project"
                           style="background-image: url(media/icons/icon_open.gif);"
                           />
                    <input type ="button"
                           onclick="project.saveProject();"
                           class="menuicon"
                           title="Save project"
                           style="background-image: url(media/icons/icon_save.png);"
                           />
                    Diagram
                    <input type ="button"
                           onclick="project.createNewDiagram();"
                           class="menuicon"
                           title="New Diagram"
                           style="background-image: url(media/icons/icon_add_diagram.png);"
                           />
                    <input type ="button"
                           onclick="project.evDiagramDelete();"
                           class="menuicon"
                           title="Delete Diagram"
                           style="background-image: url(media/icons/icon_delete.gif);"
                           />
                </span>
                <span id="helpmenu">
                    Help
                    <input type ="button"
                           onclick="javascript: helpAlert();"
                           class="menuicon"
                           title="Help"
                           style="background-image: url(media/icons/icon_info.gif);"
                           />
                </span>
                
            </div>
            <div id="credits">
                <img src="media/uruk_hai_hand_flag.gif"
                     style="vertical-align:middle;"
                     width="20"
                     height="20"
                     onclick="welcomeToTheInternet();"/>
                2012, BME
            </div>
            <div id="currentproject">Project</div>
        </div>

        <div id="editwindow">
            <div id="leftpenop" >
                <!-- left proj expl and options -->

                <div id="projectexplorer">
                    <fieldset><legend>Project Explorer</legend>
                        <div id="projecttree" class="project_explorer_tree_div" >
                            
                        </div>
                    </fieldset>
                </div>

                <div id="editorwrapper" class="editor_div">
                    <fieldset><legend>Editor</legend>
                        <div id="editor">
                            <!-- Editor writes here -->
                        </div>
                    </fieldset>
                </div>
            </div>

            <div id="diagramviewwrapper">
                <fieldset><legend>Diagram view</legend>
                    <div id="diagramview">
                        <div id="diagramTabs" class="diagram_tabs_div">
                            <!-- Diagram tabs go here. (filled with javascript) -->
                        </div>
                        <div id="diagramCanvasDiv" class="diagram_canvas_div">
                            <canvas id="mainCanvas" class="diagram_canvas" width="500" height="600"
                                    onclick="if(project) if(project.currentDiagram) project.currentDiagram.evDiagramClick(event);"
                                    onmousedown="if(project) if(project.currentDiagram) project.currentDiagram.evDiagramMouseDown(event);"
                                    onmouseup="if(project) if(project.currentDiagram) project.currentDiagram.evDiagramMouseUp(event);"
                                    onmousemove="if(project) if(project.currentDiagram) project.currentDiagram.evDiagramMouseMove(event);"
                                    onmouseout="if(project) if(project.currentDiagram) project.currentDiagram.evDiagramMouseOut();">

                            </canvas>
                        </div>
                    </div>

                    <div id="xml_output" class="xml_output"></div>
                </fieldset>
            </div>

            <div id="toolbar">
                <fieldset><legend>Toolbar</legend>
                    UML Class Diagram
                    <br>
                    Elements
                    <br>
                    <div class="diagrambutton" onclick="project.evCreateNewClass();">
                        <img src="media/icons/icon_new_class.png" 
                             style="vertical-align:middle;"/> New class</div>
                    <div class="diagrambutton" onclick="project.evCreateNewInterface();">
                        <img src="media/icons/icon_new_interface.png" 
                             style="vertical-align:middle;"/> New Interface</div>
                    <div class="diagrambutton" onclick="project.evCreateNewAttribute();">
                        <img src="media/icons/icon_add_attribute.png" 
                             style="vertical-align:middle;"/> Add Attribute</div>
                    <div class="diagrambutton" onclick="project.evCreateNewOperation();">
                        <img src="media/icons/icon_add_operation.png" 
                             style="vertical-align:middle;"/> Add Operation</div>
                    <br>
                    Relationships
                    <br>
                    <div class="diagrambutton" onclick="project.evCreateNewAssociation();">
                        <img src="media/icons/icon_association.png" 
                             style="vertical-align:middle;"/> Association</div>
                    <div class="diagrambutton" onclick="project.evCreateNewAggregation();">
                        <img src="media/icons/icon_aggregation.png" 
                             style="vertical-align:middle;"/> Aggregation</div>
                    <div class="diagrambutton" onclick="project.evCreateNewComposition();">
                        <img src="media/icons/icon_composition.png" 
                             style="vertical-align:middle;"/> Composition</div>
                    <div class="diagrambutton" onclick="project.evCreateNewDependency();">
                        <img src="media/icons/icon_dependency.png" 
                             style="vertical-align:middle;"/> Dependency</div>
                    <div class="diagrambutton" onclick="project.evCreateNewGeneralization();">
                        <img src="media/icons/icon_generalization.png" 
                             style="vertical-align:middle;"/> Generalization</div>
                    <div class="diagrambutton" onclick="project.evCreateNewRealization();">
                        <img src="media/icons/icon_realization.png" 
                             style="vertical-align:middle;"/> Realization</div>
                </fieldset>
            </div>

        </div>

        <script>
            resizeToFitWindow();
        </script>

    </body>
</html>
